var newNumberColumns;
var newNumberRow;

function startReducedShow() {
	var tableString;
	document.getElementById("g_container").innerHTML = "";

	var imageCounterId = 0;
	newNumberColumns = Math.floor(document.body.clientWidth * 0.8 / 60);
	newNumberRow = images.length / newNumberColumns;
	var tableString = "<table id='reducedImageTable'>";

	for(var newRow = 0; newRow < newNumberRow; newRow++) {
		tableString += "<tr id='column" + newRow + "'>";
		for(var newCol = 0; newCol < newNumberColumns; newCol++) {
			if(newCol + newRow * newNumberColumns < images.length) {
				tableString += "<td align='center' id='cellImage" + (newCol + newRow * newNumberColumns) + "'><a class='thumbnail' href=#><img class='reducedThumbImage' src='" + images[newCol + newRow * newNumberColumns].img_src + "' id=image" + (newCol + newRow * newNumberColumns) + "><span class ='spans'><img class='thumbImg' src='" + images[newCol + newRow * newNumberColumns].img_src + "'></span></a></td>";
			}
		}
		tableString += "</tr>";

	}
	tableString += "</table>";
	document.getElementById("g_container").innerHTML = "<div id='reducedContainer'>" + tableString + "</div>";

}

function setReducedHandler() {
	for(var i = 0; i < images.length; i++) {
		document.getElementById("image" + i).onclick = function(num) {
			return function() {
				this.style.height = "300px";
			};
		}(i);
	}
}